<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="类别设置"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </header>
    <div class="content">
      <!-- 标签按钮区域 -->
      <div class="TabBut">
        <!-- 按钮1即支出,按钮2即收入 -->
        <button @click="tabOne" :class="{ClickBut: tabOneflag}">支出</button>
        <button @click="tabTwo" :class="{ClickBut: tabTwoflag}">收入</button>
      </div>
      <!-- 按钮相对应的内容区域 -->
      <div class="TabContent">
        <div v-if="tabFlag">内容1</div>
        <div v-else>内容2</div>
      </div>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar } from 'vant'
Vue.use(NavBar)
export default {
  // 设置data初始值
  data () {
    return {
      // active: 2 // tab标签
      tabFlag: true, // 用户点击按钮切换标签内容,true为支出内容,false为收入内容
      tabOneflag: false, // 用于动态给按钮添加class名,初始值为false,触发该按钮相应的点击事件变为true,该按钮就动态添加上class名了
      tabTwoflag: false // 用于动态给按钮添加class名,初始值为false,触发该按钮相应的点击事件变为true,该按钮就动态添加上class名了
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {
    // 进入页面后默认加载按钮1即支出按钮对应的内容
    this.tabFlag = true // 默认内容1
    this.tabOneflag = true // 默认添加按钮1样式
  },
  // 计算属性
  methods: {
    // 点击支出按钮,切换为支出内容,true显示按钮1对应的内容1
    tabOne () {
      this.tabFlag = true // 切换按钮对应的标签内容
      this.tabOneflag = true // 动态给按钮1添加class
      this.tabTwoflag = false // 动态去掉按钮2的class,以防点击1的时候2的class也存在,这样的话样式就乱了
    },
    // 点击收入按钮,切换为收入内容,false显示按钮2对应的内容2
    tabTwo () {
      this.tabFlag = false
      this.tabOneflag = false // 动态去掉按钮1的class
      this.tabTwoflag = true // 动态给按钮2添加class
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  // nav-bar导航栏
  /deep/ .van-nav-bar {
    height: .6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  .content {
    // 标签按钮区域
    .TabBut {
      height: .35rem;
      width: 100%;
      background-color: #FDD949;
      text-align: center;
      button {
        width: 1.25rem;
        height: .20rem;
        border: 1px solid #25231e;
        border-radius: .05rem;
        background-color: #FDD949;
      }
      // 点击相对应的按钮添加的相对应的class
      .ClickBut {
        background-color: #1c1c1c;
        color: #FDD949;
      }
    }
    // 按钮相对应的标签内容区域
    .TabContent {}
  }
</style>
